<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-bold text-center mb-6 text-gray-700">用户登录</h2>
        <form id="loginForm" class="space-y-4">
            <div>
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                        <i class="fa fa-user"></i>
                    </span>
                    <input type="text" id="username" name="username" required
                        class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out">
                </div>
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                        <i class="fa fa-lock"></i>
                    </span>
                    <input type="password" id="password" name="password" required
                        class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out">
                </div>
            </div>
            <button type="submit"
                class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                登录
            </button>
        </form>
        <div id="message" class="mt-4 text-center text-red-500 hidden"></div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();
            const messageElement = document.getElementById('message');
            
            if (!username || !password) {
                messageElement.textContent = '用户名和密码不能为空';
                messageElement.classList.remove('hidden');
                return;
            }
            
            // 发送登录请求到后端API
            fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ "username": username, "password": password })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw err; });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    window.location.href = '/success';
                } else {
                    throw new Error(data.message);
                }
            })
            .catch(error => {
                alert(error.message || '登录请求失败，请重试');
                console.error('Error:', error);
            });
            messageElement.textContent = '登录成功！欢迎回来，' + data.username;
                messageElement.classList.remove('hidden');
                messageElement.classList.remove('text-red-500');
                messageElement.classList.add('text-green-500');
                
                // 登录成功后的操作，例如重定向或存储token
                // localStorage.setItem('token', data.token);
                // window.location.href = '/dashboard';
            })
            .catch(error => {
                messageElement.textContent = error.message || '登录时发生错误';
                messageElement.classList.remove('hidden');
            });
            // 重置表单
            setTimeout(() => {
                this.reset();
                messageElement.classList.add('hidden');
                messageElement.classList.remove('text-green-500');
                messageElement.classList.add('text-red-500');
            }, 2000);
    </script>
</body>
</html>